<template>
  <div class="activity-container">
    <div class="header">
      <div class="back-btn btn-sword" @click="goBack">返回</div>
      <div class="title brush-title">连续登录奖励</div>
      <div class="placeholder"></div>
    </div>

    <div class="panel-container">
      <div class="panel-header">
        <div class="panel-title">连续登录奖励</div>
        <div class="panel-subtitle">已连续登录 {{ loginData.continuousDays || 0 }} 天</div>
      </div>

      <div class="login-rewards-container">
        <div 
          v-for="(reward, index) in loginData.rewards" 
          :key="index"
          class="login-reward-item"
          :class="{ 
            'can-claim': reward.status === 1, 
            'claimed': reward.status === 2,
            'locked': reward.status === 0,
            'today': index + 1 === loginData.continuousDays
          }"
          @click="claimLoginReward(reward)"
        >
          <div class="day-label">第{{ index + 1 }}天</div>
          <div class="reward-icon">{{ reward.icon || '🎁' }}</div>
          <div class="reward-name">{{ reward.name }}</div>
          <div class="reward-status">{{ reward.status === 2 ? '已领取' : (reward.status === 1 ? '可领取' : '未达成') }}</div>
        </div>
      </div>

      <div class="bottom-tip">
        连续登录奖励每日0点更新，中断登录将重新计算
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginData: {
        continuousDays: 3,
        rewards: [
          { id: 1, name: '灵石×100', icon: '💎', status: 2 },
          { id: 2, name: '功德×10', icon: '🔮', status: 2 },
          { id: 3, name: '丹药×2', icon: '💊', status: 1 },
          { id: 4, name: '灵石×300', icon: '💎', status: 0 },
          { id: 5, name: '功法×1', icon: '📜', status: 0 },
          { id: 6, name: '法宝×1', icon: '🗡️', status: 0 },
          { id: 7, name: '灵石×1000', icon: '💎', status: 0 }
        ]
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    claimLoginReward(reward) {
      if (reward.status !== 1) {
        uni.showToast({
          title: reward.status === 2 ? '已经领取过了' : '未达到领取条件',
          icon: 'none'
        })
        return
      }
      setTimeout(() => {
        reward.status = 2
        uni.showToast({ title: '领取成功', icon: 'success' })
      }, 300)
    }
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
.activity-container {
  min-height: 100vh;
  background-color: #f8f6f1;
  background-image: radial-gradient(circle at 20% 15%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%),
                    radial-gradient(circle at 80% 85%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%);
  padding-bottom: 30rpx;
}
.header { display:flex; justify-content:space-between; align-items:center; padding:30rpx 40rpx; color:#4b3a2a; border-bottom:1rpx solid #d8c7a3; }
.placeholder{ width:80rpx; }
.brush-title { font-family:'Ma Shan Zheng','Kaiti SC','STKaiti',serif; font-size:40rpx; color:#2e1a0f; letter-spacing:2rpx; }
.btn-sword { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10rpx 32rpx 10rpx 28rpx; background:#6b4f3b; color:#fff; border-radius:8rpx; border:1rpx solid #4b3a2a; overflow:visible; }
.btn-sword::before{ content:""; position:absolute; right:-14rpx; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10rpx solid transparent; border-bottom:10rpx solid transparent; border-left:14rpx solid #6b4f3b; }
.btn-sword::after{ content:""; position:absolute; left:-10rpx; top:50%; transform:translateY(-50%); width:6rpx; height:26rpx; background:#4b3a2a; border-radius:2rpx; }
.panel-container { margin:30rpx; padding:34rpx; border-radius:16rpx; background:#fff; border:1rpx solid #e2d6bd; box-shadow:0 6rpx 20rpx rgba(75,58,42,0.08); }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24rpx; }
.panel-title { font-weight: 600; color:#2e1a0f; font-size:32rpx; }
.panel-subtitle { color: #7a6a5c; font-size: 24rpx; }
.login-rewards-container { display:flex; flex-wrap:wrap; gap: 24rpx; }
.login-reward-item { width: 200rpx; padding: 24rpx; border: 1rpx solid #d8c7a3; border-radius: 12rpx; text-align:center; background:#fbf9f3; box-shadow:0 4rpx 12rpx rgba(75,58,42,0.06); color:#3e2c22; }
.login-reward-item.can-claim { border-color: #c89a5b; background: linear-gradient(135deg, #e6c089 0%, #c89a5b 100%); color:#fff; }
.login-reward-item.claimed { border-color: #9c8f83; background-color: #ece6dc; color: #6b4f3b; opacity: 0.9; }
.login-reward-item.locked { border-color: #ebeef5; background-color: #f3efe7; color:#b0a79f; }
.day-label{ font-size: 24rpx; margin-bottom: 8rpx; color:#4b3a2a; }
.reward-icon{ font-size: 32rpx; }
.reward-name{ font-size: 24rpx; margin: 6rpx 0; }
.reward-status{ font-size: 22rpx; color:#7a6a5c; }
.bottom-tip{ margin-top: 20rpx; color:#7a6a5c; font-size: 24rpx; text-align:center; }
</style>